<template>
  <div class="BaseEcharts2-wrapper">
    <Echart :options="options2" />

  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { HomeFilled, Delete, Search } from "@element-plus/icons-vue";
import Echart from "./Echart.vue";

const parentMsg = ref("父组件传递值是a");
var iconArray = [
  "rect", //矩形
  "roundRect", //圆角矩形
  "rect", //矩形
  "roundRect", //圆角矩形
  "rect", //矩形
  "roundRect", //圆角矩形
  "roundRect", //圆角矩形
  "roundRect", //圆角矩形
  "roundRect", //圆角矩形
  "roundRect", //圆角矩形  
  "roundRect", //圆角矩形
  "roundRect", //圆角矩形
  "roundRect", //圆角矩形
];

var data = [];
var legendData = [];
for (var i = 0; i < iconArray.length; i++) {
  data.push({
    name:   '我是图例' +i ,
    type: "bar",
    data: [random(1000)],
  });
  legendData.push({
    name:   '我是图例' +i ,
    icon: iconArray[i],
  });
}

function random(num) {
  return Math.floor(Math.random() * num);
}
const options2 = {
  color: [
    "#f8735c",
    "#cc4b1e",
    "#cc7c1e",
    "#cca51e",
    "#80cc1e",
    "#1ecc8d",
    "#1e7ccc",
    "#4f1ecc",
    "#9d1ecc",
    "#cc1e78",
  ],
  title: {
    text: "图echart2",
    subtext: "图echart2子标题点击去百度",
    sublink: "https://www.baidu.com/",
  },
  // legend: {
  //      //图例组件，颜色和名字
  //      align :'left',
  //      right: "10%",
  //   top: "30%",
  //   itemGap: 16,
  //   itemWidth: 18,
  //   itemHeight: 10,
  //   itemWidth: 24,
  //   itemHeight: 24,
  //   orient   : 'vertical',
  //   data: legendData,
  // },
  legend: {
    // width: 510,
    height: 510, right: "10%",
    top: "30%",
    orient: "vertical",
    align: "left",
    data: legendData,
  },
  grid: {
    height: "100%",
  },
  xAxis: {
    data: [""],
  },
  yAxis: {},
  series: data,
};



// 初始化获取订单列表
onMounted(() => {
  // getOrderList()
});






</script>

<style scoped lang="scss">
.BaseEcharts2-wrapper {
  height: 100%;
  
  background-color: aliceblue;
}
</style>